<template>
    <div>
        <h1>首页</h1>
        <h2>123</h2>
        <div v-for="(v,index) in list" :key="index" class="item"> 
            <img :src="v.ping">
            <p>{{v.pname}}</p>
            <p>{{v.price}}</p>
            <button @click="add(v.pid)">购物车</button>
        </div>
    </div>
</template>
<script>
//引入组件
import shopping from '@/components/shopping'
export default {
    name:'one',
    components:{shopping},

    data() {
        return {
            list:[
            {ping:require('../assets/logo.png'),pname:"华为",price:1000,pid:10001},
            {ping:require('../assets/logo.png'),pname:"华为",price:1001,pid:10002},
            {ping:require('../assets/logo.png'),pname:"华为",price:1002,pid:10003},
            {ping:require('../assets/logo.png'),pname:"华为",price:1003,pid:10004},
            {ping:require('../assets/logo.png'),pname:"华为",price:1004,pid:10005},
            {ping:require('../assets/logo.png'),pname:"华为",price:1005,pid:10006},
            {ping:require('../assets/logo.png'),pname:"华为",price:1006,pid:10007},
           
         ],
        }
    },
    methods: {
        add(v){
            this.$store.commit("add",v)
        },
    },
    mounted(){

    }
}
</script>
<style scoped>
.item{
    width: 20x;
    height: 350px;
    float: left;
}
.img{
    width: 10%;
}
</style>